import React, { useEffect, useState, useCallback } from 'react'
import { passWordLogin } from '@/components/passMode'
import style from './index.module.scss'
import { Button, message } from 'antd'
import { PlusOutlined } from '@ant-design/icons'
import { Collapse } from 'antd'
import { CaretRightOutlined } from '@ant-design/icons'
import BlogManage from './blogManage'
import CommentManage from './commentManage'
import { getTotalCommentStatus } from '@/api'
import { useHistory } from 'react-router-dom'
import { baseImg } from '@/api/config'

const { Panel } = Collapse
export default function Manage() {
  const [totalComment, setTotalComment] = useState(0)
  const [dataList, setDataList] = useState<
    { key: string; value: string | number }[]
  >([])
  const [activeKey, setActiveKey] = useState(1)
  const history = useHistory()
  const getTotalComment = async () => {
    const { data } = await getTotalCommentStatus()
    setTotalComment(data.num || 0)
  }
  const created = useCallback(async () => {
    await passWordLogin()
    setDataList([
      { key: '总访问量', value: '20' },
      { key: '今日访问量', value: '20' },
      { key: '用户总数', value: '20' },
    ])
    getTotalComment()
  }, [])
  useEffect(() => {
    created()
  }, [created])
  return (
    <div className={style.win}>
      <div className={style.manage}>
        <div className={style.head}>
          <div
            onClick={() => (window.location.href = '/')}
            className={style.logo}
          >
            <img src={baseImg + 'logo.png'} alt="" />
          </div>
          <Button
            className={style.btn}
            onClick={() => history.push(`/newadd`)}
            type="primary"
          >
            发文章
            <PlusOutlined />
          </Button>
          <Button
            onClick={() => message.warning('暂未开通')}
            type="primary"
            className={style.btn}
          >
            发玩具
            <PlusOutlined />
          </Button>
        </div>

        <div className={style.hr}></div>

        <div className={style.data_row}>
          {dataList.map((el) => {
            return (
              <div key={el.key} className={style.data_list}>
                <div className={style.key}>{el.key}</div>
                <div className={style.value}>{el.value}</div>
              </div>
            )
          })}
        </div>
        <div className={style.manage_row}>
          <Collapse
            accordion
            activeKey={activeKey}
            onChange={(e) => {
              const keynum = Number(e)
              if (!keynum && activeKey === 1) getTotalComment()
              setActiveKey(keynum)
            }}
            expandIcon={({ isActive }) => (
              <CaretRightOutlined rotate={isActive ? 90 : 0} />
            )}
            className={style.collapse}
          >
            <Panel
              header="评论管理"
              className={style.panel}
              extra={
                totalComment !== 0 && (
                  <div className={style.panel_right}>
                    {totalComment >= 1000 ? 999 : totalComment}
                  </div>
                )
              }
              key={1}
            >
              <CommentManage />
            </Panel>

            <Panel header="文章管理" className={style.panel} key={2}>
              <BlogManage />
            </Panel>
            <Panel header="玩具管理" className={style.panel} key={3}>
              <div style={{ textAlign: 'center' }}>暂未开通</div>
            </Panel>
          </Collapse>
        </div>
        {/* <div>发文章</div>
      <div>发玩具</div>
      <div>评论列表(已读未读)</div>
        查看详情,删除
      <div>文章管理</div>
        编辑,评论,删除
      <div>玩具管理</div>
        编辑,删除
      <div>阅后即焚,临时网盘</div>  
      <div>小人(博客宠物)</div>
      <div>hooks其他api的使用</div> */}
      </div>
    </div>
  )
}
